<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <p>444</p>
    </ul>
    <script>
       //事件委托 事件代理 事件绑定委托给其祖先级元素
       //1.减少事件的绑定，优化性能
       //2.未来元素也可以绑定事件
       var lis=document.querySelectorAll("ul li");
       var ul=document.querySelector("ul");

    //    var li = document.createElement("li");
    //    li.innerHTML="555";
    //    ul.appendChild(li);

    //    for(var i=0;i<lis.length;i++){
    //      lis[i].onclick=function(){
    //         console.log("111");
    //      }
    //    }

      //使用事件委托，新创建的元素都可以绑定事件
       var li = document.createElement("li");
       li.innerHTML="555";
       ul.appendChild(li);

         ul.onclick=function(e){
            if(e.target.tagName==="LI"){
                console.log("222");
            }
         }
    </script>
</body>
</html>